visibility

Internet Explorer/Internet Explorer

Netscape/Netscape

Opera/Opera

Safari/Safari

Firefox/Firefox

6.0

7.0

8.0

8.0

9.0

8.0

9.2

9.5

1.3

2.0

3.1

1.5

2.0

3.0

Частково

Частково

Так

Так

Так

Помилки

Помилки

Так

Частково

Частково

Так

Так

Так

Так

Коротка інформація

CSS

CSS2, CSS2.1

Значення за умовчанням

visible

Наслідує

Так

Застосовується

До усіх елементів

Аналог HTML

Ні

Посилання на специфікацію

http://www.w 3.org/TR/CSS21/visufx.html#propdef - visibility

Опис

Призначений для відображення або приховання елементу, включаючи рамку навколо нього і фон. При прихованні елементу, хоча він і стає не видний, місце, яке елемент займає, залишається за ним. Якщо передбачається виведення різних елементів в одно і те ж місце екрану, для обходу цієї особливості слід використовувати абсолютне позиціонування або скористатися властивістю display.

Синтаксис

visibility: visible | hidden | collapse | inherit

Значення

visible

Відображає елемент як видимий.

hidden

Елемент стає невидимим або правильніше сказати, повністю прозорим, оскільки він продовжує брати участь у форматуванні сторінки.

collapse

Якщо це значення застосовується не до рядків або колонок таблиці, то результат його використання буде таким же, як hidden. У разі використання collapse для вмісту осередків таблиць, то вони реагують, немов до них було додано display: none. Іншими словами, задані рядки і колонки забираються, а таблиця перебудовується по новій. Це значення не підтримується браузером Internet Explorer.

inherit

Наслідує значення батька.

Приклад

HTML 4.0  CSS 2.1 IE 6 IE 7 IE 8 Op 9.5 Sa 3.1 Ff 2.0 Ff 3.0

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN""http ://www.w 3.org/TR/html4/strict.dtd">
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=windows - 1251">
    <title>visibility</title>
    <script type="text/javascript"> 
      function hiddenLayer() {
        document.getElementById("descr").style.visibility = "hidden";
      }
      function showLayer() {
        document.getElementById("descr").style.visibility = "visible";
      }
    </script>
  </head>
  <body>
  
    <p><a href="#" onMouseOver="showLayer()" onMouseOut="hiddenLayer()"><img 
    src="button.gif" width="98" height="33" alt="Кнопка"></a></p>
 
    <div id="descr" style="visibility: hidden">
      Ця эксклюзия є підмножиною астрациональных 
      супремативных монотенных федоний кадонарного экстрафазория.</div>
  
  </body>
</html>

Об'єктна модель

[window.]document.getElementById("elementID").style.visibility

Браузери

Internet Explorer до сьомої версії включно не підтримує значення inherit і collapse.

Браузер Safari до версії 2.0 включно підтримує значення collapse.

Opera до версії 9.2 включно сприймає значення collapse як hidden для усіх елементів